<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <link  href="../../hos_manage/images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="../css/public.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../css/sweetalert.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="../css/pageCode.css?cache=<%=Math.random()%>" />

    <script src="../js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <%@ include file="../header.jsp"%>
    <!--内容-->
    <div class="containerone">
    <%@ include file="../left_menu.jsp"%>
        <!--右边内容-->
        <div class="right_cont" id="add_role">
        <!--右边导航下面内容-->
            <div>
                <div class="message_hos_news_container">
                    <div class="department_top">
                        <div class="department_top_left department_top_top">
                            <span>
                              <p class="padding-right-min" v-html="title"></p>
                            </span>
                        </div>
                        <div class="department_top_right ui_line_height">
                            <a href="role.jsp" >
                              <span class="add_btn doctor_add_btn " id='doctor_add_btn'>返回</span>
                            </a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="role_box">
                        <div class="role_name">
                            <span>角色名称:</span>
                            <input type="text" name="role_name" v-model="roleName" @input="checkName()" placeholder="长度不超过20个字符"/>
                            <div class="test_tip" v-show="nameExist">角色名称重复</div>
                        </div>
                        <div class="role_description">
                            <span>角色描述:</span>
                            <textarea name="role_description" rows="3" cols="20" v-model="roleDesc" placeholder="长度不超过50个字符"></textarea>
                        </div>
                        <div class="power_choose_title">
                            <span>权限选择:</span>
                        </div>
                        <div class="power_choose">
                            <div class="power_choose_list">
                                <table class="three_list_choose" border="1px thin" cellspacing="0" cellpadding="0"  bordercolor="#cccccc" style="border-collapse:collapse;">
                                    <tbody v-for="eachFirstMenu in menus">
                                        <tr>
                                            <td colspan="11">
                                                <input type="checkbox" :value="eachFirstMenu.id" v-model="priv_ids" @change="changeInput(eachFirstMenu.id)">
                                                <label v-html="eachFirstMenu.name"></label>
                                            </td>
                                        </tr>
                                        <tr v-for="eachSecondMenu in eachFirstMenu.childs">
                                            <td class="ui_width_one">
                                                <input  type="checkbox" :value="eachSecondMenu.id" v-model="priv_ids"  @change="changeInput(eachSecondMenu.id)">
                                                <label v-html="eachSecondMenu.name"></label>
                                            </td>
                                            <td colspan="10">
                                                <div v-for="eachThirdMenu in eachSecondMenu.childs">
                                                    <input  type="checkbox" :value="eachThirdMenu.id" v-model="priv_ids"  @change="changeInput(eachThirdMenu.id)">
                                                    <label v-html="eachThirdMenu.name"></label>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="role_sure" @click="addRole()">确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/sweetalert-dev.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#add_role",
            data: {
                roleName: "",
                roleDesc: "",
                title: "添加角色",
                priv_ids: [],
                menus: [],
                menusRelative: [],
                nameExist: false,
                nameTimeout: false,
            },
            methods: {
                checkName: function() {
                    var self = this;
                    clearTimeout(this.nameTimeout);
                    if (/\s/.test(this.roleName)) {
                        return;
                    }
                    if (this.roleName) {
                        this.nameTimeout = setTimeout(function() {
                            $.ajax({
                                type: 'POST',
                                url: "add_role.jsp",
                                data: hasHospitalPower.parms({
                                    act: "check_role",
                                    name: self.roleName,
                                }),
                                success: function(res) {
                                    res = JSON.parse(res);
                                    if (res.errcode == 0) {
                                        self.nameExist = false;
                                    } else {
                                        self.nameExist = true;
                                    }
                                },
                            });
                        }, 700);
                    }
                },
                // 点击切换input
                changeInput: function(id) {
                    var relative = this.getRelative(id);
                    // 这里只是三层关系，不是递归
                    // 如果存在子且
                    if (relative.childs.length > 0) {
                        // 操作为去掉
                        if (this.priv_ids.indexOf(id) == -1) {
                            this.childsRemove(relative.childs);
                        } else {
                            this.childsAdd(relative.childs);
                        }
                    }
                    if (relative.parent && this.priv_ids.indexOf(id) != -1) {
                        this.parentAdd(relative.parent);
                    }
                },
                // 添加子的内容
                childsAdd: function(childs) {
                    var self = this;
                    childs.forEach(function(item) {
                        var index = self.priv_ids.indexOf(item.id);
                        if (index == -1) {
                            self.priv_ids.push(item.id);
                        }
                        if (item.childs.length > 0) {
                            self.childsAdd(item.childs);
                        }
                    });
                },
                // 删除子选项的内容
                childsRemove: function(childs) {
                    var self = this;
                    childs.forEach(function(item) {
                        var index = self.priv_ids.indexOf(item.id);
                        if (index != -1) {
                            self.priv_ids.splice(index, 1);
                        }
                        if (item.childs.length > 0) {
                            self.childsRemove(item.childs);
                        }
                    });
                },
                parentAdd: function(parent) {
                    var index = this.priv_ids.indexOf(parent.id);
                    if (index == -1 && parent.id) {
                        this.priv_ids.push(parent.id);
                    }
                    if (parent.parent) {
                        this.parentAdd(parent.parent);
                    }
                },
                // 根据映射关系查找到节点
                getRelative: function(id) {
                    for (var i = 0; i < this.menusRelative.length; i++) {
                        if (this.menusRelative[i].id == id) {
                            return this.menusRelative[i];
                        }
                    }
                },
                // 根据树形结构设置子-父映射关系
                setRelative: function(menus) {
                    var itemList = [];
                    function ergodic(list) {
                        list.childs.forEach(function(item) {
                            if (item.childs && item.childs.length > 0) {
                                ergodic(item);
                            }
                            itemList.push(Object.assign(item, {
                                parent: list
                            }))
                        });
                    }
                    ergodic({
                        childs: menus
                    });
                    return itemList;
                },
                addRole: function() {
                    if (this.nameExist) {
                        return;
                    }
                    if (this.roleName == "") {
                        swal("请填写角色名称");
                        return;
                    }
                    if (/\s/.test(this.roleName)) {
                        swal("角色名称不能包含空格");
                        return;
                    }
                    if (this.roleDesc == "") {
                        swal("请填写角色描述");
                        return;
                    }
                    if (/^\s/.test(this.roleDesc) || /\s$/.test(this.roleDesc)) {
                        swal("角色描述头尾不能包含空格");
                        return;
                    }
                    if (this.priv_ids.length == 0) {
                        swal("请至少勾选一个权限");
                        return;
                    }
                    if (this.roleName.length > 20) {
                        swal("角色名称不能超过20个字");
                        return;
                    }
                    if (this.roleDesc.length > 50) {
                        swal("角色描述不能超过50个字");
                        return;
                    }
                    $.ajax({
                        type: 'POST',
                        url: "add_role.jsp",
                        data: hasHospitalPower.parms({
                            act: "add_role",
                            name: this.roleName,
                            desc: this.roleDesc,
                            priv_ids: this.priv_ids.join("|")
                        }),
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                swal({
                                    title: "添加成功",
                                }, function() {
                                    locationHerf("role");
                                });
                            } else {
                                swal(res.errmsg);
                            }
                        }.bind(this),
                    });
                }
            },
            ready: function() {
                var parms = {
                    act: "user_menus",
                    user_id: ${user.id} + "",
                };
                if (hasHospitalPower.power()) {
                    this.title += "-" + hasHospitalPower.nowHospital.name;
                    parms = {
                        act: "all_menus"
                    }
                }
                $.ajax({
                    type: 'POST',
                    url: "add_role.jsp",
                    data: hasHospitalPower.parms(parms),
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            this.menus = res.data;
                            this.menusRelative = this.setRelative(this.menus);
                            this.priv_ids = this.menusRelative.map(function(item) {
                                return item.id;
                            });
                        } else {
                            swal(res.errmsg);
                        }
                    }.bind(this),
                });
            }
        });
    </script>
</body>
</html>
